<template>
  <div class="page-login">
    <!-- 头部图标 -->
    <div class="login-header">
      <a href="/" class="logo" />
    </div>
    <div class="login-panel">
      <div class="banner">
        <img
          src="//s0.meituan.net/bs/file/?f=fe-sso-fs:build/page/static/banner/www.jpg"
          width="480"
          height="370"
          alt="美团网"
        >
      </div>
      <div class="form" @keyup.enter="enter">
        <h4 v-if="error" class="tips">
          <i />{{ error }}
        </h4>
        <p><span>账号登录</span></p>
        <el-input
          v-model="email"
          prefix-icon="profile"
          placeholder="邮箱"
          type="email"
        />
        <el-input
          v-model="password"
          prefix-icon="password"
          type="password"
          placeholder="密码"
        />
        <div class="foot">
          <el-checkbox v-model="checked">
            7天内自动登录
          </el-checkbox>
          <a href="/getPwd">忘记密码？</a>
        </div>
        <el-button class="btn-login" type="success" size="mini" @click="login">
          登录
        </el-button>
        <span class="toRegister">
          还没有账号？<a href="/register">免费注册</a>
        </span>
      </div>
    </div>
    <footer class="footer">
      <div class="site-info-nav cf">
        <ul>
          <li class="first">
            <a rel="nofollow" href="https://about.meituan.com/about.html">关于美团</a>
          </li>
          <li><a rel="nofollow" href="https://zhaopin.meituan.com/">加入我们</a></li>
          <li><a rel="nofollow" href="http://emis.meishi.meituan.com/merchantsSettled">商家入驻</a></li>
          <li><a rel="nofollow" href="https://www.meituan.com/help/faq">帮助中心</a></li>
          <li class="last">
            <a href="http://meituan.com/mobile">美团手机版</a>
          </li>
        </ul>
      </div>
      <div class="copyright">
        <p>
          ©<span>2020</span>
          <a href="https://www.meituan.com">美团网团购</a>
          meituan.com
          <a href="http://www.miibeian.gov.cn/" target="_blank">京ICP证070791号</a>
          京公网安备11010502025545号
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
import CryptoJs from 'crypto-js'
export default {
  data () {
    return {
      checked: '',
      email: '',
      password: '',
      error: ''
    }
  },
  layout: 'blank',
  methods: {
    async login () {
      // 验证表单
      if (this.email === '') {
        this.$message.error('请输入邮箱!')
        return
      }
      if (this.password === '') {
        this.$message.error('请输入密码!')
        return
      }
      const res = await this.$axios.post('/users/signin', {
        username: this.email,
        password: CryptoJs.MD5(this.password).toString()
      })
      // eslint-disable-next-line no-console
      console.log(res)
      // 登陆失败
      if (res.status !== 200) {
        this.$message.error(res.data.msg)
        return
      }
      // 登陆失败
      if (res.data.code !== 0) { return this.$message.error(res.data.msg) }
      // 登陆成功
      this.$message.success(res.data.msg)
      setTimeout(() => {
        location.href = '/'
      }, 888)
    },
    enter () {
      this.login()
    }
  }
}
</script>

<style lang="scss">
@import '@/assets/css/login/index.scss';
</style>
